import React from 'react';
import {renderRoutes} from "react-router-config";
import {NavLink} from 'react-router-dom';// 利用 NavLink 组件进行路由跳转

import {
  Top,
  Tab,
  TabItem,
} from './style';
import Player from "../Player";

/*function Home (props) {
    return (
        <div>Home</div>
    )
}*/

/*
启动项目,打开页面,你可以看到 "home" 已经显示到屏幕,但是这还不够,我们需要展示下面的功能组件,但是你在地址后面加上 /recommend,却并没有显示 Recommend 组件相应的内容,因为 renderRoutes 这个方法只渲染一层路由,之前 Home 处于数组第一层,后面的功能组件在第二层,当然不能正常渲染啦。其实要解决这个问题也非常简单,只需在 Home 中再次调用 renderRoutes 即可。

props.route是renderRoutes匹配到对应路由,然后自己给那个路由组件传递的属性,下面有一个routes属性,为该条路由下面的子路由们
*/

function Home(props) {
  const {route} = props;

  return (
    <div>
      <Top>
        <span className="iconfont menu">&#xe65c;</span>
        <span className="title">Netease Music Mock</span>
        <span className="iconfont search" onClick={() => props.history.push ('/search')}>&#xe62b;</span>
      </Top>
      <Tab>
        <NavLink to="/recommend"
                 activeClassName="selected"><TabItem><span> 推荐 </span></TabItem></NavLink>
        <NavLink to="/singers"
                 activeClassName="selected"><TabItem><span> 歌手 </span></TabItem></NavLink>
        <NavLink to="/rank"
                 activeClassName="selected"><TabItem><span> 排行榜 </span></TabItem></NavLink>
      </Tab>
      {renderRoutes(route.routes)}
      <Player/>
    </div>
  );
}


export default React.memo(Home);
